<!DOCTYPE html>
<label>{{ 'EXOTIC.HIDE' | translate }}:
   <input type="checkbox" ng-model="ct.state.player.options.hideBought">
</label>
{{ 'EXOTIC.SORT' | translate }} <select name="sort" ng-model="ct.state.player.options.sortIndex">
  <option value="0">{{ 'EXOTIC.SORT_NAME' | translate }}</option>
  <option value="1">{{ 'EXOTIC.SORT_PRICE' | translate }}</option>
</select>
<div ng-repeat="slot in ct.state.player.element_slots track by $index">
  <element-select index="$index"
                  ng-if="!slot"></element-select>
  <div ng-if="slot">
    <h2>{{ct.data.elements[slot.element].name}}</h2>
    <h3>
    <pretty value="ct.state.player.resources[ct.data.elements[slot.element].exotic]"></pretty>
    <get-html value="ct.data.elements[slot.element].exotic"></get-html>
    (+<pretty value="ct.state.player.resources[ct.data.elements[slot.element].exotic]*ct.data.constants.EXOTIC_POWER*100"></pretty>%)
    </h3>
    <div>
      <p>{{ 'EXOTIC.SACRIFICE' | translate:ct }}
      </p>
      <p>{{ 'EXOTIC.BOOST' | translate }}</p>
      <div ng-if="ct.visibleSubatomic(ct.state.player).length > 0">
        <div ng-repeat="resource in ct.visibleSubatomic(ct.state.player)">
          {{resource}}:
          <pretty value="ct.infuseBoost(resource, ct.state.player)*100"></pretty>%
        </div>
        {{ 'EXOTIC.BOOST_TOTAL' | translate }}:
        <pretty value="ct.totalInfuseBoost(ct.state.player)*100"></pretty>%
    </div>
    <p>{{ 'EXOTIC.PRESTIGE_NOW' | translate }}</p>
    <p ng-repeat="(key,value) in ct.productionSum(slot.element)">
      <pretty value="value"></pretty>
      <get-html value="key"></get-html>
    </p>
    <button type="button"
            class="btn btn-default"
            ng-click="ct.exoticPrestige($index, ct.state.player)">{{ 'EXOTIC.PRESTIGE' | translate }}</button><font color="red">警告：声望按钮是用来转生的，点了会直接重生，请想清楚再点！</font>
    <p>{{ 'EXOTIC.PRODUCED' | translate }}</p>
    <p ng-repeat="(key,value) in ct.cache.breakdown[slot.element]">
      <get-html value="key"></get-html>
      <pretty value="ct.state.player.statistics.exotic_run[slot.element][key] || 0"></pretty>
      (<span ng-repeat="(exotic,number) in value">+<pretty value="number"></pretty>
      <get-html value="exotic"></get-html> </span>)
    </p>
    <button class="btn btn-default"
            ng-click="ct.upgradeService.buyAll(ct.state.player, ct.state.player.exotic_upgrades[slot.element], ct.visibleExoticUpgrades(slot, ct.state.player), ct.data.exotic_upgrades, ct.data.elements[slot.element].exotic)">{{ 'UPGRADES.BUY_ALL' | translate }}</button>
    <div class="row">
      <div ng-repeat="up in ct.visibleExoticUpgrades(slot, ct.state.player)"
           ng-click="ct.buyExoticUpgrade(up, slot, ct.state.player)"
           class="col-xs-12 btn btn-default"
           ng-class="{disabled: ct.data.exotic_upgrades[up].price > ct.state.player.resources[ct.data.elements[slot.element].exotic] &&
         !ct.state.player.exotic_upgrades[slot.element][up],
         active: ct.state.player.exotic_upgrades[slot.element][up]}">
        <span class="pull-left">
        {{ct.data.exotic_upgrades[up].name}}: {{ct.data.exotic_upgrades[up].description}}
      </span>
        <span class="pull-right">
        <pretty value="ct.data.exotic_upgrades[up].price"></pretty> &nbsp;
        <get-html value="ct.data.elements[slot.element].exotic"></get-html>
      </span>
      </div>
    </div>
  </div>
</div>
